<template>
	<view class="content">
		<view class="topTabs f f-a-c f-j-b">
			<view class="item" @click="toDay(1)" :class="{act:ind==1}">
				今日
			</view>
			<view class="item" @click="toDay(2)" :class="{act:ind==2}">
				本周
			</view>
			<view class="item" @click="toDay(3)" :class="{act:ind==3}">
				本月
			</view>
			<view class="item" @click="toDay(4)" :class="{act:ind==4}">
				今年
			</view>
		</view>
		<!-- 饼环示例1-开始 -->
		<view class="chart-con f f-a-c">
			<view class="chart-wrap">
				<view class="ring-chart ">
					<l-echart ref="ringChart"></l-echart>
				</view>
			</view>
			<view class="p-t-30 m-l-30">
				<view class="f f-a-c">
					<view class="dian one m-r-10">

					</view>
					<view class="book m-r-80">
						借阅中
					</view>
					<view class="num">
						{{borrowing}}
					</view>
				</view>
				<view class="f f-a-c m-b-20 m-t-20">
					<view class="dian tow m-r-10">

					</view>
					<view class="book m-r-80">
						待归还
					</view>
					<view class="num">
						{{expired}}
					</view>
				</view>
				<view class="f f-a-c m-b-20">
					<view class="dian three m-r-10">

					</view>
					<view class="book m-r-80">
						已归还
					</view>
					<view class="num">
						{{returned}}
					</view>
				</view>
			</view>
		</view>

		<!-- 饼环示例2-结束 -->
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	export default {
		data() {
			return {
				ind: 1,
				borrowing: 0,
				expired: 0,
				returned: 0
			}
		},
		onShow() {
			this.initList()
		},
		mounted() {
			//加载饼环数据--示例1
			this.loadRingData();
			//加载饼环数据--示例2
			// this.loadPieChartDemo2();
		},
		props: {

		},

		methods: {
			async initList() {
				let n = await this.$api.LoanStatistics({
					date: this.ind == 1 ? 'day' : this.ind == 2 ? 'week' : this.ind == 3 ? 'month' : 'year'
				})
				this.returned = n.data.returned
				this.expired = n.data.expired
				this.borrowing = n.data.borrowing
				this.loadRingData()
			},
			toDay(num) {
				this.ind = num
				this.initList()
			},
			//加载饼环数据,这里可以去请求服务器获取数据
			loadRingData() {
				//这里请求服务器得到数据
				let data = [{
						value: this.borrowing
					},
					{
						value: this.expired
					},
					{
						value: this.returned
					}
				];
				// let data = [{
				// 		value: 2
				// 	},
				// 	{
				// 		value: 3
				// 	},
				// 	{
				// 		value: 1
				// 	}
				// ];

				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				this.$refs.ringChart.init(echarts, chart => {
					chart.setOption({
						series: [{
							type: 'pie',
							// selectedMode: 'single',
							// selectedOffset: 0,
							// hoverAnimation: false,
							radius: [30, 70],
							left: 'center',
							width: '98%',

							//指向label的线设置
							labelLine: {
								length: 0,
								length2: 0,
								maxSurfaceAngle: 80
							},
							//布局样式
							labelLayout: function(params) {

							},
							//数据
							data: data
						}]
					});

					//监听图标项点击事件
					chart.on("click", function(e) {
						for (var i = 0; i < data.length; i++) {
							if (i != e.dataIndex) {
								chart.dispatchAction({
									type: 'downplay', //取消高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							} else {
								chart.dispatchAction({
									type: 'highlight', //突出高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							}
						}
					});
				});
			}
		},
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.topTabs {
		width: 90%;
		height: 64rpx;
		background: #f8f8f8;
		border-radius: 32rpx;
		margin: 0 auto;
		padding: 0 10rpx;

		.item {
			width: 170rpx;
			height: 52rpx;
			line-height: 50rpx;
			background: #f8f8f8;
			border-radius: 26rpx;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #999999;
		}
	}

	.act {
		background-color: #fff !important;
		color: #009D85 !important;
	}

	.dian {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
	}

	.one {
		background-color: #5470c6;
	}

	.tow {
		background-color: #91cc75;
	}

	.three {
		background-color: #fac858;
	}

	.foru {
		background-color: #ee6666;
	}

	.num {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #1a1a1a;
	}

	.book {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #1a1a1a;
	}

	.content {
		width: 100%;
		// background-color: #f1f3f2;
		padding: 20rpx 0rpx 100rpx;
	}

	.t-sm {
		font-size: 22rpx;
		color: #6e6e6e;
		padding-left: 10rpx;
	}

	.chart-con {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 28rpx;

		.chart-wrap {
			// width: 100%;
			box-sizing: border-box;
			// background-color: #ffffff;
			padding: 32rpx 0rpx;
			border-radius: 20rpx;

			.title {
				box-sizing: border-box;
				width: 100%;
				padding: 0rpx 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}

			.ver-line {
				height: 30rpx;
				width: 8rpx;
				border-radius: 10rpx;
				background-color: #4e9d77;
			}

			.title-desc {
				font-size: 30rpx;
				color: #222222;
				margin-left: 22rpx;
				font-weight: bold;
			}

			.ring-chart {
				height: 350rpx;
				width: 350rpx;
				// width: 100%;
				box-sizing: border-box;
				padding: 0rpx 28rpx;
				margin-top: 32rpx;
				margin-left: -50rpx;
			}
		}
	}


	.gap {
		margin-top: 30rpx;
	}
</style>